<template>
  <div class="layout-container">
    <!-- 左侧边栏 -->
    <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <div class="sidebar-header">
        <h2 v-if="!isCollapsed">DeepSeek</h2>
        <el-icon v-else @click="toggleCollapse">
          <Menu />
        </el-icon>
      </div>

      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        :collapse="isCollapsed"
        @select="handleMenuSelect"
      >
        <el-menu-item index="chat">
          <el-icon><ChatDotRound /></el-icon>
          <template #title>聊天</template>
        </el-menu-item>

        <el-menu-item index="history">
          <el-icon><Clock /></el-icon>
          <template #title>历史记录</template>
        </el-menu-item>

        <el-menu-item index="settings">
          <el-icon><Setting /></el-icon>
          <template #title>设置</template>
        </el-menu-item>

        <el-divider />

        <el-menu-item index="new-chat">
          <el-icon><Plus /></el-icon>
          <template #title>新建聊天</template>
        </el-menu-item>
      </el-menu>

      <div class="sidebar-footer">
        <el-button
          type="text"
          class="collapse-btn"
          @click="toggleCollapse"
        >
          <el-icon>
            <component :is="isCollapsed ? 'ArrowRight' : 'ArrowLeft'" />
          </el-icon>
          <span v-if="!isCollapsed">收起边栏</span>
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 根据当前选中的菜单显示不同内容 -->
      <div v-if="activeMenu === 'chat'" class="content-page">
        <h3>聊天页面</h3>
        <p>这里是聊天功能的主界面</p>
        <!-- 可以在这里放入你的聊天组件 -->
      </div>

      <div v-else-if="activeMenu === 'history'" class="content-page">
        <h3>历史记录</h3>
        <el-table :data="historyData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="content" label="内容摘要" />
        </el-table>
      </div>

      <div v-else-if="activeMenu === 'settings'" class="content-page">
        <h3>设置</h3>
        <el-form label-width="120px">
          <el-form-item label="主题颜色">
            <el-color-picker v-model="settings.themeColor" />
          </el-form-item>
          <el-form-item label="消息提醒">
            <el-switch v-model="settings.notification" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSettings">保存设置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-else-if="activeMenu === 'new-chat'" class="content-page">
        <h3>新建聊天</h3>
        <el-input
          v-model="newChatTitle"
          placeholder="请输入聊天标题"
          style="width: 300px; margin-bottom: 20px"
        />
        <el-button type="primary" @click="createNewChat">创建</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Menu,
  ChatDotRound,
  Clock,
  Setting,
  Plus,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue';

// 侧边栏状态
const isCollapsed = ref(false);
const activeMenu = ref('chat');

// 历史记录数据
const historyData = ref([
  {
    date: '2023-05-01',
    title: 'Vue3相关问题',
    content: '如何实现响应式数据...'
  },
  {
    date: '2023-05-02',
    title: 'Element Plus使用',
    content: '表单验证的实现方式...'
  },
  {
    date: '2023-05-03',
    title: '项目架构',
    content: '大型项目如何组织代码...'
  }
]);

// 设置数据
const settings = ref({
  themeColor: '#409EFF',
  notification: true
});

// 新建聊天
const newChatTitle = ref('');

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleMenuSelect = (index) => {
  activeMenu.value = index;
};

const saveSettings = () => {
  ElMessage.success('设置保存成功');
  console.log('当前设置:', settings.value);
};

const createNewChat = () => {
  if (!newChatTitle.value.trim()) {
    ElMessage.warning('请输入聊天标题');
    return;
  }
  ElMessage.success(`已创建新聊天: ${newChatTitle.value}`);
  historyData.value.unshift({
    date: new Date().toISOString().split('T')[0],
    title: newChatTitle.value,
    content: '新创建的聊天会话'
  });
  newChatTitle.value = '';
  activeMenu.value = 'chat';
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-header {
  padding: 16px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e7ed;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.sidebar-menu {
  flex: 1;
  border-right: none;
  background-color: transparent;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid #e4e7ed;
}

.collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #606266;
}

.collapse-btn:hover {
  color: #409eff;
}

.main-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.content-page {
  max-width: 1200px;
  margin: 0 auto;
}
</style>
